<%--
  Created by IntelliJ IDEA.
  User: mi
  Date: 2019/5/24
  Time: 16:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="common/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="common/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/personal.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/mater.min.css">
    <script src="js/jquery2.js"></script>
    <script src="common/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
    <table class="table  table-hover table-condensed">
        <thead>
        <tr>
            <th>职位主键</th>
            <th>职位编号</th>
            <th>职位名称</th>
            <th>对应职务</th>
            <th>所属部门</th>
            <th>编制人数</th>
            <th>职位说明</th>
        </tr>
        </thead>
        <tbody id="tbody" class="table table-striped">

        </tbody>
    </table>
    <button class="btn btn-info" id="referrerBtn" onclick="window.location.href=document.referrer">返回</button>
    <button class="btn btn-success" id="update" class="btn btn-primary btn-lg" data-toggle="modal"
            data-target="#myModal">UPDATE
    </button>
    <button class="btn btn-danger" id="update_id" class="btn btn-primary btn-lg" data-toggle="modal"
            data-target="#myModal2">UPDATE-ID
    </button>
    <button class="btn btn-danger" id="delete" class="btn btn-link">DELETE</button>

    <%--模态框一--%>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="jobForm">
                        <input type="text" name="checkId" id="checkId" hidden>
                        <div class="form-group">
                            <label for="id">职位主键</label>
                            <input type="text" class="form-control" name="id" id="id">
                        </div>
                        <div class="form-group">
                            <label for="number">职位编号</label>
                            <input type="text" class="form-control" id="number" name="number">
                        </div>
                        <div class="form-group">
                            <label for="name">职位名称</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>
                        <div class="form-group">
                            <label>对应职务</label>
                            <select class="layui-select" id="duct_id" name="ductId">
                                <option value="">--请选择--</option>
                            </select>-
                        </div>
                        <div class="form-group">
                            <label>所属部门</label>
                            <select class="layui-select" id="dept_id" name="deptId">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="wren">编制人数</label>
                            <input type="text" class="form-control" id="wren" name="wren"/>
                        </div>
                        <div class="form-group">
                            <label for="winfo">职位说明</label>
                            <input class="form-control" id="winfo" name="winfo"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-link" id="save">Save</button>
                </div>
            </div>
        </div>
    </div>

    <%--模态框二--%>
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="jobForm2">
                        <input type="text" name="checkId" id="checkId2" hidden>
                        <div class="form-group">
                            <label for="id">职位主键</label>
                            <input type="text" class="form-control" name="id" id="id2">
                        </div>
                        <div class="form-group">
                            <label for="number">职位编号</label>
                            <input type="text" class="form-control" id="number2" name="number">
                        </div>
                        <div class="form-group">
                            <label for="name">职位名称</label>
                            <input type="text" class="form-control" id="name2" name="name">
                        </div>
                        <div class="form-group">
                            <label>对应职务</label>
                            <select class="layui-select" id="duct_id2" name="ductId">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>所属部门</label>
                            <select class="layui-select" id="dept_id2" name="deptId">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="wren">编制人数</label>
                            <input type="text" class="form-control" id="wren2" name="wren"/>
                        </div>
                        <div class="form-group">
                            <label for="winfo">职位说明</label>
                            <input class="form-control" id="winfo2" name="winfo"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-link" id="save2">Save</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    /**
     * document.referrer获取前一个url
     */
    if ("http://localhost:8080/maven_project/" == document.referrer ||
        document.referrer == "http://localhost:8080/maven_project/showJob.jsp") {
        var elementById = document.getElementById("referrerBtn");
        elementById.innerText = "刷新";
        elementById.onclick = function () {
            window.location.reload();
        }
    }

    function fun(obj) {
        //表格的第一个td
        var firstElement = obj.firstChild;
        $("#id").val(firstElement.innerText);
        $("#id2").val(firstElement.innerText);
        //复制一个假的id作为修改条件
        $("#checkId").val(firstElement.innerText);
        $("#checkId2").val(firstElement.innerText);
        //表格的第二个td
        var twoElement = firstElement.nextSibling;
        $("#number").val(twoElement.innerText);
        $("#number2").val(twoElement.innerText);
        //表格的第三个td
        var threeElemnt = firstElement.nextSibling.nextSibling;
        $("#name").val(threeElemnt.innerText);
        $("#name2").val(threeElemnt.innerText);
        //表格的最后一个td
        var lastElement = obj.lastChild;
        $("#winfo").val(lastElement.innerText);
        $("#winfo2").val(lastElement.innerText);
        //表格的倒数第二个td
        var previousLastElement = lastElement.previousSibling;
        $("#wren").val(previousLastElement.innerText);
        $("#wren2").val(previousLastElement.innerText);

        //获取对应职务的td
        var duct = threeElemnt.nextSibling;

        var ductOpts = $("[name='ductOpts']");
        for (var i = 0; i < ductOpts.length; i++) {
            if (ductOpts[i].innerText == duct.innerText) {
                $(ductOpts[i]).prop("selected", "selected");
            }
        }

        var ductOpts2 = $("[name='ductOpts2']");
        for (var i = 0; i < ductOpts2.length; i++) {
            if (ductOpts2[i].innerText == duct.innerText) {
                $(ductOpts2[i]).prop("selected", "selected");
            }
        }

        //获取所属部门的td
        var dept = previousLastElement.previousSibling;
        var deptOpts = $("[name='deptOpts']");
        for (var i = 0; i < deptOpts.length; i++) {
            if (deptOpts[i].innerText == dept.innerText) {
                $(deptOpts[i]).prop("selected", "selected");
            }
        }

        var deptOpts2 = $("[name='deptOpts2']");
        for (var i = 0; i < deptOpts2.length; i++) {
            if (deptOpts2[i].innerText == dept.innerText) {
                $(deptOpts2[i]).prop("selected", "selected");
            }
        }
    }

    $(function () {


        /**
         * 查询职务表渲染界面
         */
        $.ajax({
            type: "get",
            url: "duc/queryDcuTypeAll",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, da) {
                    var options = $("<option value='" + da.id + "' name='ductOpts'>" + da.zname + "</option>");
                    var options2 = $("<option value='" + da.id + "' name='ductOpts2'>" + da.zname + "</option>");
                    $("#duct_id").append(options);
                    $("#duct_id2").append(options2);
                });
            },
            error: function () {
                window.location.href = "404.jsp";
            }
        });

        /**
         * 查需部门
         */
        $.ajax({
            type: "get",
            url: "dept/queryAll",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, da) {
                    var options = $("<option value='" + da.id + "' name='deptOpts'>" + da.dname + "</option>");
                    var options2 = $("<option value='" + da.id + "' name='deptOpts2'>" + da.dname + "</option>");
                    $("#dept_id").append(options);
                    $("#dept_id2").append(options2);
                });
            },
            error: function () {
                window.location.href = "404.jsp";
            }
        });


        $.ajax({
            type: "get",
            url: "job/queryJobAll",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, da) {
                    if (index % 2 == 0) {
                        var rows = "<tr class='success' onclick='fun(this)'>" +
                            "<th>" + da.id + "</th>" +
                            "<th>" + da.number + "</th>" +
                            "<th>" + da.name + "</th>" +
                            "<th>" + da.zname + "</th>" +
                            "<th>" + da.dname + "</th>" +
                            "<th>" + da.wren + "</th>" +
                            "<th>" + da.winfo + "</th>" +
                            "</tr>"
                    } else {
                        var rows = "<tr class='danger' onclick='fun(this)'>" +
                            "<th>" + da.id + "</th>" +
                            "<th>" + da.number + "</th>" +
                            "<th>" + da.name + "</th>" +
                            "<th>" + da.zname + "</th>" +
                            "<th>" + da.dname + "</th>" +
                            "<th>" + da.wren + "</th>" +
                            "<th>" + da.winfo + "</th>" +
                            "</tr>"
                    }
                    $("#tbody").append(rows);
                })
            },
            error: function () {
                window.location.href = "404.jsp";
            }
        });
        $("#update").click(function () {
            $("#id").prop("disabled", "disabled");
        });

        $("#update_id").click(function () {
            $("#id2").prop("disabled", false);
            $("#number2").prop("disabled", "disabled");
            $("#name2").prop("disabled", "disabled");
            $("#duct_id2").prop("disabled", "disabled");
            $("#dept_id2").prop("disabled", "disabled");
            $("#wren2").prop("disabled", "disabled");
            $("#winfo2").prop("disabled", "disabled");
        });

        $("#save").click(function () {
            $.ajax({
                type: "post",
                url: "job/updateJobNotId",
                data: $("#jobForm").serialize(),
                dataType: "",
                success: function () {
                    window.location.reload();
                },
                error: function () {
                    window.location.href = "404.jsp";
                }
            });
        });

        $("#save2").click(function () {
            $.ajax({
                type: "post",
                url: "job/updateJobById",
                data: $("#jobForm2").serialize(),
                dataType: "",
                success: function () {
                    window.location.reload();
                },
                error: function () {
                    window.location.href = "404.jsp";
                }
            });
        });

        $("#delete").click(function () {
            $.ajax({
                url: "job/deleteDucTypeById",
                data: $("#jobForm").serialize(),
                success: function (msg) {
                    if (msg != 1) {
                        alert("该职位已被使用不能删除")
                    }
                    window.location.reload();
                },
                error: function () {
                    window.location.href = "404.jsp";
                }
            });
        });
    });
</script>
</html>
